
<!-- 已经合作的供应商列表 -->

<template>
  <div>
    <el-table :data="supplierList" style="width: 100%">

      <el-table-column label="编号" width="180">
        <!-- 插槽，类似于迭代变量 -->
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.supId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="供应商店名">
        <template slot-scope="scope">
          <i class="el-icon-house"></i>
          <span style="margin-left: 10px">{{ scope.row.supName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="经理名">
        <template slot-scope="scope">
          <i class="el-icon-s-custom"></i>
          <span style="margin-left: 10px">{{ scope.row.supManager }}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系电话">
        <template slot-scope="scope">
          <i class="el-icon-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.supIphone }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否合作">
        <template slot-scope="scope">
          <el-button size="mini" @click="yesOrNo(scope.row)">
            <i class="el-icon-refresh-right"></i>
            <span style="margin-left: 10px">{{ scope.row.supPartner }}</span>
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="details(scope.row)"><i class="el-icon-edit"></i></el-button>
          <el-button size="mini" type="danger" @click="stock(scope.row)"><i class="el-icon-delete"></i></el-button>
        </template>
      </el-table-column>

    </el-table>

    <div class="block">
      <!--page-size: 默认显示条数 -->
      <el-pagination @size-change="selectPage" @current-change="handleCurrentChange" :current-page="curPage"
        :page-sizes="[1, 3, 5, 10]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 模态框，新增修改用 -->
    <el-dialog :title="title" :visible.sync="isShow" width="40%">

      <el-form ref="form" label-width="80px">
        <br />
        <el-form-item label="供应商名">
          <el-col :span="22">
            <input type="hidden" v-show="supplierForm.supId" />
            <el-input  v-model="supplierForm.supName" readOnly="readOnly"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="经理名">
          <el-col :span="22">
            <el-input  v-model="supplierForm.supManager" readOnly="readOnly"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="联系电话">
          <el-col :span="22">
            <el-input  v-model="supplierForm.supIphone" readOnly="readOnly"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="经营范围">
          <el-col :span="22">
            <el-input  v-model="supplierForm.businessScope" readOnly="readOnly"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="是否合作">
          <el-col :span="22">
            <el-input  v-model="supplierForm.supPartner" readOnly="readOnly"></el-input>
          </el-col>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">关闭</el-button>
      </span>
    </el-dialog>



  </div>
</template>

<script>
  /* 导入模块*/
  export default {
    name: "supplierList",
    data() {
      return {
        supplierList: [],
        total: 0, //总条数
        totalPage: 0, //总页数
        curPage: 1, //当前数
        rows: 5, //每页显示条数

        supPartner: "Yes", //是否合作

        isShow:false,//模态框是否显示
        title: "店铺详情", //模态框标题

        supplierForm: { //表单的请求对象
          supId: null,
          supName: "",
          supManager: "",
          supIphone:"",
          businessScope:"",
          supPartner:"",
        },

      }
    },
    methods: {
      loaddata() { //加载数据
        var mythis = this;

        $.ajax({
          url: "http://127.0.0.1:8080/hotel/listAll",
          type: "post",
          data: {
            "page": mythis.curPage,
            "row": mythis.rows,
            "supPartner": mythis.supPartner,
          },
          dataType: "json",
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: function(data) {
            /* info是后端map的建名 */
            mythis.supplierList = data.info;
            mythis.total = data.total;
            mythis.totalPage = data.totalPage;

          }
        })
      },

      selectPage(v) { //用户选择页数
        this.rows = v;
        this.loaddata();
      },

      selectPage(v) { //用户选择页数
        this.rows = v;
        this.loaddata();
      },

      handleCurrentChange(val) { //当前用户页
        this.curPage = val;
        this.loaddata();
      },


      details(supplier) { //打开修改模态框
        /* 显示模态框 */
        this.isShow = true;
        /* 更改模态框的标题 */
        this.title = "店铺详情";
        /* 把选中的值赋值给模态框的表单元素 */
        this.supplierForm.supId = supplier.supId;
        this.supplierForm.supName = supplier.supName;
        this.supplierForm.supManager= supplier.supManager;
        this.supplierForm.supIphone=supplier.supIphone;
        this.supplierForm.businessScope=supplier.businessScope;
        this.supplierForm.supPartner=supplier.supPartner;
      },

      yesOrNo(supplier){
        var is = confirm("你确定要更改合作状态吗?");
        if (is) {
          var mythis = this;
          $.ajax({
            url: "http://localhost:8080/hotel/yesOrNo",
            type: "post",
            data: supplier,
            dataType: "json",
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function(data) {
              mythis.$alert(data.info)
              if (data.code == "ok") {
                //刷新
                mythis.loaddata();
              }
            }
          })
        }
      },

      stock(supplier){//去合作的商铺进货

      },

    },
    mounted() { //挂载函数
      this.loaddata();
    }
  }
</script>

<style>
</style>
